import React, { useEffect, useState, memo } from 'react';
import { MONTHList } from '@/pages/SalaryManage/utils/staticList';
import cn from 'classnames';
import isEmpty from 'lodash/isEmpty';
import { Input, Popover } from 'antd';
import styles from './index.less';

const RangeMonthSelect = ({ value = {}, onChange, placeholder = '请选择月份区间', disabled }) => {
    const [startValue, setStartValue] = useState({ month: 0 });
    const [visible, setVisible] = useState(false);
    const [val, setVal] = useState(placeholder);
    const handleVisibleChange = v => {
        setVisible(v);
        setStartValue({ month: 0 });
    };
    const content = (
        <div className={styles.monthSelectWrap}>
            <div className={styles.monthSelectContent}>
                <div className={styles.monthSelectContentLeft}>
                    <div className={styles.monthSelectTitle}>开始月份</div>
                    <ul className={styles.monthList}>
                        {MONTHList.map(item => (
                            <li
                                onClick={() => {
                                    setStartValue(item);
                                    console.log(item);
                                }}
                                key={item.month}
                                className={cn(styles.normalMonthItem, {
                                    [styles.activeMonthItem]: startValue && item.month === startValue.month
                                })}
                            >
                                {item.monthName}
                            </li>
                        ))}
                    </ul>
                </div>
                <div className={styles.monthSelectContentRight}>
                    <div className={styles.monthSelectTitle}>结束月份</div>
                    <ul className={styles.monthList}>
                        {MONTHList.map(item => {
                            const allow = startValue && startValue.month && item.month >= startValue.month;
                            return (
                                <li
                                    className={allow ? styles.normalMonthItem : styles.disabledMonthItem}
                                    key={item.month}
                                    onClick={() => {
                                        if (allow) {
                                            onChange({
                                                startMonthDto: startValue,
                                                endMonthDto: item
                                            });
                                            handleVisibleChange(false);
                                        }
                                    }}
                                >
                                    {item.monthName}
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </div>
        </div>
    );

    useEffect(() => {
        if (!isEmpty(value) && value.startMonthDto && value.endMonthDto) {
            setVal(`${value.startMonthDto.monthName} ~ ${value?.endMonthDto.monthName}`);
        } else {
            setVal(`${placeholder}`);
        }
    }, [value]);
    return (
        <Popover
            overlayClassName={styles.monthSelectPopover}
            trigger="click"
            visible={visible}
            content={content}
            onVisibleChange={handleVisibleChange}
        >
            <Input
                value={val}
                disabled={disabled}
                className={cn(styles.monthSelectText, { [styles.disabledMonthSelectText]: isEmpty(value) })}
                type="button"
                onClick={() => {
                    setVisible(true);
                }}
            />
        </Popover>
    );
};

export default memo(RangeMonthSelect);
